// colors
$colors: (
  'red': #f56723,
  'green': rgba(38, 191, 38, 1),
  'blue': rgba(73, 143, 242),
  'green-1': rgba(101, 171, 36, 1),
  'grey': rgba(184, 184, 184, 1),
  'grey-1': rgba(204, 204, 204, 1),
  'grey-2': rgba(245, 245, 245, 1),
  'white': rgba(255, 255, 255, 1),
  'black': rgba(51, 51, 51, 1),
  'black-1': rgba(87, 87, 87, 1),
  'orange': rgba(255, 92, 74, 1),
  'yellow': rgba(243, 167, 21, 1)
);

$border-color: map-get($colors, 'grey');
// font size

$base-font-size: 14px;
$font-sizes: (
  xxs: 0.6154,
  xs: 0.7692,
  //10px
    sm: 0.8571,
  //12px
    md: 1,
  //14px
    lg: 1.1429,
  //16px
    xl: 1.2857,
  //18px
    xxl: 1.4286
);
.mx-auto {
  margin: 0 auto;
}
.my-auto {
  margin: auto 0;
}
.border-bottom {
  border-bottom: 1px solid rgba(204, 204, 204, 1);
}
.radius-12 {
  border-radius: 0.8571rem;
}

$flex-jc: (
  start: flex-start,
  end: flex-end,
  center: center,
  between: space-between,
  around: space-around
);
$flex-ai: (
  start: flex-start,
  end: flex-end,
  center: center,
  stretch: stretch
);
// spacing
// 0-5: 0
// .mt-1  => margin top  .pb-2
$spacing-types: (
  m: margin,
  p: padding
);
$spacing-directions: (
  t: top,
  r: right,
  b: bottom,
  l: left
);
$spacing-base-size: 1rem;
$spacing-sizes: (
  0: 0,
  1: 0.25,
  2: 0.5,
  3: 1,
  4: 1.5,
  5: 3
);
